function songAddPage() {
    $('#box').html(`
    
                    <!-- Page Header -->
                      <div class="page-header">
                        <div class="row align-items-center">
                          <div class="col">
                            <h3 class="page-title">添加歌曲</h3>
                            <ul class="breadcrumb">
                              <li class="breadcrumb-item"><a href="/admin/dataAnalysis">首页</a></li>
                              <li class="breadcrumb-item active">添加歌曲</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                      <!-- /Page Header -->
                      <div class="row">
                        <div class="col-sm-12">
                          <div class="card">
                            <div class="card-body">
                              <form onsubmit="return false" id="form1"  name="from" enctype="multipart/form-data">
                                <div class="row">
                                  <div class="col-12">
                                    <h5 class="form-title"><span>请输入歌曲信息</span></h5>
                                  </div>
                                  <div class="col-12 col-sm-6">
                                    <div class="form-group">
                                      <label>歌名</label>
                                      <input type="text" name="songName">
                                    </div>
                                  </div>
                                  
                                  <div class="col-12 col-sm-6">
                                    <div class="form-group">
                                      <label>歌手ID</label>
                                      <input type="text" name="singerId">
                                    </div>
                                  </div>
                                  <div class="col-12 col-sm-6">
                                    <div class="form-group">
                                      <label>歌曲</label>
                                      <input type="file" name="fileSongMP3" accept="audio/mpeg">
                                    </div>
                                  </div>
                                  <div class="col-12 col-sm-6">
                                    <div class="form-group">
                                      <label>歌曲海报</label>
                                      <input type="file" name="fileSongImg" accept="image/*">
                                    </div>
                                  </div>
                                  <div class="col-12 col-sm-6">
                                    <div class="form-group">
                                      <label>时长</label>
                                      <input type="text" name="songTime">
                                    </div>
                                  </div>
                                  <div class="col-12 col-sm-6">
                                    <div class="form-group">
                                      <label>类型</label>
                                      <select type="text" name="typeId">
                                        <option value="1">华语</option>
                                        <option value="2">流行</option>
                                        <option value="3">摇滚</option>
                                        <option value="4">民谣</option>
                                        <option value="5">电子</option>
                                      </select>
                                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                      <label>推荐</label>
                                      <select type="text" name="recommendId">
                                        <option value="1">芒种推荐</option>
                                        <option value="2">霜降必听</option>
                                        <option value="3">谷雨专享</option>
                                        <option value="4">小雪最佳</option>
                                        <option value="5">冬至推送</option>
                                        <option value="6">大暑必备</option>
                                        <option value="7">夏至专用</option>
                                        <option value="8">立春推荐</option>
                                      </select>
                                    </div>
                                  </div>
                                  <div class="col-12">
                                    <button type="submit" class="btn btn-primary" onclick="songIns()">添加</button>
                                  </div>
                                </div>
                              </form>
                            </div>
                          </div>
                        </div>
                      </div>
    `)
}
//添加歌曲
function songIns() {

    var form = $('#form1')[0];
    var formData = new FormData(form);
    console.log(formData)
    $.ajax({
        url:'/admin/songIns',
        type:'post',
        dataType:'json',
        data:formData,
        processData: false, // 告诉jQuery不要处理数据
        contentType: false, // 告诉jQuery不要设置Content-Type请求头
        success:()=>{
            alert("添加成功");
            songAddPage();
        },
        error:function () {
            alert("您仿佛添加了一些不可以用的数据，请检查")
        }
    })
}
//歌曲导航跳转
function songPage(startIndex,size) {
    console.log(1);
    let msg=$('#searchSong').val();
    if (msg==undefined){
        msg='';
    }

    $.ajax({
        url:'/admin/songPage',
        type:'get',
        data: {startIndex:startIndex,size:size,str:msg},
        dataType:'json',
        success:(res)=>{
            console.log(res);

            //准备渲染表单
            let str=``;
            let list=res.data.records;
            for (let i=0;i<list.length;i++){
                let time=''+list[i].createTime;
                time=time.replaceAll("T"," ");
                time=time.replaceAll(".000+00:00","");
                str+=`
                        <tr>
                          <td class="text-center"><input type="checkbox" name="delList" value="${list[i].id}"></td>
                          <td>${i+1}</td>
                          <td><img src="${list[i].songImg}" alt="歌曲海报" style="height: 40px;width: 80px"></td>
                          <td style="color: deepskyblue">${list[i].songName}</td>
                          <td style="color: deeppink">${list[i].singerName}</td>
                          <td style="color: deeppink">${list[i].heat}</td>
                          <td style="color: deeppink">${list[i].songTime}</td>
                          <td style="color: deeppink">${list[i].num}</td>
                          <td>
                            <div class="actions">
                                <a href="javascript:void()" onclick="openPopup(${list[i].id})" class="btn btn-sm bg-success-light">
                                    <i class="fas fa-pen"></i>
                                </a>
                                <a href="javascript:void()" onclick="songDel(${list[i].id})" class="btn btn-sm bg-danger-light">
                                    <i class="fas fa-trash"></i>
                                </a>
                            </div>
                          </td>
                        </tr>
                     `;
            }
            //表单基础数据准备完毕
            //定义一个分页
            let page=[];
            let before='#';
            let after='#';
            let pages='';
            if (res.data.pages>3 && res.data.current+2<=res.data.pages){
                page=[res.data.current,res.data.current+1,res.data.current+2];
            }else if (res.data.pages>3 && res.data.current+2>res.data.pages){
                page=[res.data.pages-2,res.data.pages-1,res.data.pages];
            }else {
                for (let i=0;i<res.data.pages;i++){
                    page[i]=i+1;
                }
            }
            for (let i=0;i<page.length;i++){
                pages+=`<li class="page-item"><a class="page-link" href="javascript:void(0)" onclick="songPage(${page[i]},${size})">${page[i]}</a></li>`
            }
            if (res.data.current >1){
                before='songPage('+(res.data.current-1)+','+size+')';
            }
            if (res.data.current<res.data.pages){
                after='songPage('+(res.data.current+1)+','+size+')';
            }
            //定义分页结束
            //开始渲染数据
            $('#box').html(`
                <div class="page-header">
                  <div class="row align-items-center">
                    <div class="col">
                      <h3 class="page-title">音乐管理</h3>
                      <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">首页</a></li>
                        <li class="breadcrumb-item active">添加音乐</li>
                      </ul>
                    </div>
                  </div>
                </div>


                <!-- /Page Header -->
                <div class="row">
                  <div class="col-sm-12">
                    <div class="card card-table">
                      <div class="card-body">
                        <div class="table-responsive">
                          <div class="top-nav-search">
                            <form onsubmit="return false">
                              <input type="text" class="form-control" placeholder="请输入歌名" id="searchSong" value="${msg}">
                              <button class="btn" onclick="songPage(1,5)"><i class="fas fa-search"></i></button>
                            </form>
                          </div>
                          <table class="table table-hover table-center mb-0 datatable">
                            <thead>
                              <tr>
                                <th><a href="javascript:void(0)" onclick="songDelIds()" class="btn btn-sm bg-danger-light"><span style="color: red">批量删除</span></i></th>
                                <th>ID</th>
                                <th>歌曲海报</th>
                                <th>歌名</th>
                                <th>歌手</th>
                                <th>热度</th>
                                <th>时长</th>
                                <th>次数</th>
                                <th>操作</th>
                              </tr>
                            </thead>
                            <tbody>
                                ${str}
                            </tbody>
                          </table>
                        </div>
                        <div style="text-align: right;margin-top: 20px">
                            <div style="float: left;display: inline-block">
                                总记录数: <span style="color: purple">${res.data.total} </span> ,
                                总页数: <span style="color: #0e72a2"> ${res.data.pages} </span>,
                                当前页: <span style="color: red">${res.data.current}</span>
                            </div>
                            <div style="display: inline-block;margin-right:100px">
                                <nav aria-label="Page navigation example">
                                    <ul class="pagination">
                                      <li class="page-item">
                                        <a class="page-link" href="javascript:void(0)" onclick="${before}" aria-label="Previous">
                                          <span aria-hidden="true">&laquo;</span>
                                        </a>
                                      </li>
                                      ${pages}
                                      <li class="page-item" onclick="${after}">
                                        <a class="page-link" href="javascript:void(0)" onclick="${after}" aria-label="Next">
                                          <span aria-hidden="true">&raquo;</span>
                                        </a>
                                      </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
            `);
            //渲染数据结束
            console.log(2);
        },
        error:()=>{
            alert("您的数据仿佛不存在")
        }
    })

}
function songDel(id) {
    $.ajax({
        url:'/admin/songDel/'+id,
        type:'delete',
        dataType:'json',
        success:()=>{
          songPage(1,12) ;
        }
    })
}

//批量删除
function songDelIds() {
    let list = document.getElementsByName("delList");
    console.log(list);
    let ids=[];
    for(var i=0;i<list.length;i++){
        if(list[i].checked == true){
            ids[ids.length]=list[i].value;
        }
    }
    $.ajax({
        url:'/admin/songDelIds',
        type:'delete',
        data: {ids:ids},
        dataType:'json',
        success:(res)=>{
            songPage(1,12);
        }
    })
}


function openPopup(id) {
    $.ajax({
        url:'/admin/songQueryById/'+id,
        type: 'get',
        dataType:'json',
        success:(res)=>{
            console.log(res)
            if(res.data.words==null){
                res.data.words="暂无歌词"
            }
            $('#box').append(`
                <form onsubmit="return false" id="form1">
                    <!-- 弹出框 -->
                    <div class="popup" id="popup">
                      <div class="form-wrapper">
                        <h2>修改/添加歌词</h2>
                        <textarea id="message" name="message" rows="5" required>${res.data.words}</textarea>
                
                        <div class="form-buttons">
                          <button class="close-button" onclick="closePopup()">关闭</button>
                          <button class="submit-button" onclick="submitForm(${id})">提交</button>
                        </div>
                      </div>
                    </div>
                </form>
            `)
        }
    })
}
function closePopup() {
    $('#form1').remove();
}
function submitForm(id) {
    let msg=$('#message').val();
    console.log(msg)
    $.ajax({
        url:'/admin/songUpdateWords/'+id+'/'+msg,
        type:'post',
        dataType:'json',
        success:()=>{
            // 提交表单
            alert("您的信息已成功提交！");
            songPage(1,12)
        }
    })
}

